<template>
    <view class="w-full h-screen bg-page personal-wrap overflow-hidden" v-if="info" :style="themeColor()">

        <view class="my-[var(--top-m)] sidebar-margin overflow-hidden card-template py-[20rpx]">
            <u-cell-group :border="false" class="cell-group">
                <u-cell :title="t('headimg')" :titleStyle="{ 'font-size': '28rpx' }" :is-link="true">
                    <template #value>
                        <!-- #ifdef MP-WEIXIN -->
                        <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" :plain="true" class="border-0"
                            @click="checkWxPrivacy">
                            <u-avatar :src="img(info.headimg || info.avatar)"
                                :default-url="img('static/resource/images/default_headimg.png')" size="40"
                                leftIcon="none" />
                        </button>
                        <!-- #endif -->
                        <!-- #ifndef MP-WEIXIN -->
                        <u-upload @afterRead="afterRead" :maxCount="1">
                            <u-avatar :src="img(info.headimg || info.avatar)"
                                :default-url="img('static/resource/images/default_headimg.png')" size="40"
                                leftIcon="none" />
                        </u-upload>
                        <!-- #endif -->
                    </template>
                </u-cell>
                <u-cell :title="t('nickname')" :titleStyle="{ 'font-size': '28rpx' }" :is-link="true"
                    :value="info.nickname" @click="updateNickname.modal = true"></u-cell>
                <u-cell :title="t('sex')" :titleStyle="{ 'font-size': '28rpx' }" :is-link="true"
                    :value="info.sex == 1 ? '男' : '女' || t('unknown')" @click="sexSheetShow = true"></u-cell>
                <u-cell :title="t('mobile')" :titleStyle="{ 'font-size': '28rpx' }">
                    <template #value>
                        <view v-if="info.mobile" class="mr-[10rpx]">{{ mobileConceal(info.mobile) }}</view>
                        <view v-else>

                            <!-- #ifdef H5 -->
                            <button @click="redirect({ url: '/app/pages/auth/bind' })"
                                class="bg-transparent w-[170rpx] p-[0] rounded-[100rpx] text-[var(--primary-color)] !border-[2rpx] !border-solid border-[var(--primary-color)] text-[24rpx] h-[54rpx] flex-center">{{
                                    t('bindMobile') }}</button>
                            <!-- #endif -->

                            <!-- #ifdef MP-WEIXIN -->
                            <button
                                class="bg-transparent w-[170rpx] p-[0] rounded-[100rpx] text-[var(--primary-color)] !border-[2rpx] !border-solid border-[var(--primary-color)] text-[24rpx] h-[54rpx] flex-center"
                                open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">{{ t('bindMobile')
                                }}</button>
                            <!-- #endif -->

                        </view>
                    </template>
                </u-cell>

            </u-cell-group>
        </view>

        <!-- 修改昵称 -->
        <u-popup class="popup-type" :safeAreaInsetBottom="false" round="var(--rounded-big)" :show="updateNickname.modal"
            mode="center" @close="updateNickname.modal = false">
            <view class="w-[620rpx] popup-common pb-[40rpx]" @touchmove.prevent.stop>
                <view class="title !pt-[50rpx] !pb-[60rpx]">{{ t('updateNickname') }}</view>
                <view class="mx-[50rpx] border-0 border-b border-[#eee] border-solid">
                    <input type="nickname" class="h-[88rpx] text-[26rpx]" v-model="updateNickname.value"
                        :placeholder="t('nicknamePlaceholder')"
                        placeholderClass="text-[26rpx] h-[88rpx] flex items-center" @blur="bindNickname">
                </view>
                <view class="px-[60rpx] pt-[70rpx]">
                    <button hover-class="none"
                        class="primary-btn-bg text-[#fff] h-[80rpx] font-500 leading-[80rpx] rounded-[100rpx] text-[26rpx]"
                        @click="updateNicknameConfirm">{{ t('confirm') }}</button>
                </view>
            </view>
        </u-popup>

        <!-- 修改性别 -->
        <u-action-sheet class="" :actions="sexList" :show="sexSheetShow" :closeOnClickOverlay="true"
            :safeAreaInsetBottom="true" @close="sexSheetShow = false" @select="updateSex"></u-action-sheet>
        <!-- #ifdef MP-WEIXIN -->
        <!-- 小程序隐私协议 -->
        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
        <!-- #endif -->
    </view>
    <!-- 水印 -->
    <watermark></watermark>
</template>

<script setup lang="ts">
import { ref, computed, reactive, nextTick } from 'vue'
import { t } from '@/locale'
import useMemberStore from '@/stores/member'
import { img, redirect, mobileConceal } from '@/utils/common'
import { modifyMember } from '@/app/api/member'
import { fetchBase64Image, uploadImage } from '@/app/api/system'
import { onLoad } from '@dcloudio/uni-app'

const memberStore = useMemberStore()
const info = computed(() => memberStore.info)

const wxPrivacyPopupRef: any = ref(null)

onLoad(() => {
    // #ifdef MP
    nextTick(() => {
        if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
    })
    // #endif
})

/**
 * 修改昵称
 */
const updateNickname = reactive({
    modal: false,
    value: info.nickname || ''
})

const bindNickname = (e: any) => {
    updateNickname.value = e.detail.value
}

const updateNicknameConfirm = () => {
    if (uni.$u.test.isEmpty(updateNickname.value)) { uni.showToast({ title: t('nicknamePlaceholder'), icon: 'none' }); return }

    modifyMember({
        // field: 'nickname',

        nickname: updateNickname.value
    }).then(res => {
        memberStore.info.nickname = updateNickname.value
        updateNickname.modal = false
    })
}

/**
 * 修改性别
 */
const sexSheetShow = ref(false)
const sexList = computed(() => {
    return [
        { name: t('man'), value: '1' },
        { name: t('woman'), value: '2' }
    ]
})
const updateSex = (e: any) => {
    modifyMember({
        // field: 'sex',
        sex: e.value
    }).then(res => {
        memberStore.info.sex = e.value
    })
}

/**
 * 修改用户头像
 */
const onChooseAvatar = (e: any) => {
    fetchBase64Image({
        filePath: e.detail.avatarUrl,
        name: 'file'
    }).then(uploadRes => {
        memberStore.info.headimg = uploadRes.data
    })
    // uni.getFileSystemManager().readFile({
    //     filePath: e.detail.avatarUrl, //选择图片返回的相对路径
    //     encoding: 'base64', //编码格式
    //     success: res => {
    //         fetchBase64Image({ content: res.data }).then((uploadRes: any) => {
    //             modifyMember({
    //                 // field: 'headimg',
    //                 avatar: uploadRes.data.url
    //             }).then(res => {
    //                 memberStore.info.headimg = uploadRes.data.url
    //             })
    //         })
    //     }
    // })
}

const afterRead = (event: any) => {
    uploadImage({
        filePath: event.file.url,
        name: 'file'
    }).then((res: any) => {
        modifyMember({
            // field: 'headimg',
            avatar: res.data
        }).then(() => {
            memberStore.info.headimg = res.data
        })
    }).catch(() => {
    })
}


</script>

<style lang="scss" scoped>
page {
    background: var(--page-bg-color);
}

:deep(.u-upload) {
    flex: none;
}

:deep(.cell-group),
:deep(.u-cell-group) {
    .u-cell {
        .u-cell__body {
            padding: 0;
            height: 90rpx;
            margin-top: 16rpx;
        }

        &:first-of-type .u-cell__body {
            margin-top: 0;
        }

        .u-cell__title-text {
            font-size: 28rpx;
            line-height: 40rpx;
        }

        .u-icon__icon {
            font-size: 24rpx !important;
        }

        .u-cell__value {
            line-height: 1;
            font-size: 28rpx;
            color: #333 !important;
        }

        .u-line {
            display: none;
        }
    }
}

:deep(button, button:after) {
    border: none;
}

// 修改性别
:deep(.u-action-sheet) {
    .u-line {
        margin: 0 30rpx !important;
        width: auto !important;
        border-color: #ddd !important;
    }

    .u-action-sheet__cancel {
        padding: 0;

    }

    .u-action-sheet__item-wrap__item__name {
        font-size: 30rpx !important;
    }
}

:deep(.u-picker) .u-toolbar {
    font-size: 32rpx !important;
    padding: 26rpx 10rpx;
    height: auto !important;
    font-weight: 500;
}
</style>
<style lang="scss">
.personal-wrap .u-cell--clickable {
    background-color: transparent !important;
}
</style>
